<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>手机端登录页面</title>
    <link href="css/mui.min.css" rel="stylesheet" />
	<script type="text/javascript" src="./js/layui/layui.js"></script>
	<script type="text/javascript" src="./js/jquery-2.1.4.js"></script>
    <style type="text/css">
        .login-content{
            position: absolute;
            top: 30%;
            width: 90%;
            left: 50%;
            margin-left: -45%;
            border-radius: 10px;
            padding: 0 25px;
            background-color: #fff;
        }
        .ui-page-login,  body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .ui-page-login{
            background-image: url("images/login-bg.jpg");
            background-size: 100% 100%;
        }
        .login-content{
            position: absolute;
            top: 30%;
            width: 90%;
            left: 50%;
            margin-left: -45%;
            border-radius: 10px;
            padding: 0 25px;
            background-color: #fff;
        }
        .login-logo{
            text-align: center;
            margin-top: -37px;
        }
        .login-logo img{
            border: 1px solid #fb4746;
            border-radius: 50%;
        }
        .ipttxt-row{
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
        }
        .ipttxt-row label{
            width: 20%;
        }
        .ipttxt-row .mui-input{
            width: 80%;
            border: 1px solid #fb4746;
            border-radius: 30px;
            margin-bottom: 0;
            background-color: transparent;
        }
        .ipttxt-row .mui-input::placeholder{ font-size: 14px;}
        .link-area{
            margin-top: 12px;
            margin-bottom: 15px;
            text-align: right;
        }
        .link-area a{
            color: #fb4746;
            font-size: 14px;
        }
        .mui-btn-login{
            padding: 10px 0;
            background-color: #ff7776;
            border: 1px solid #fb4746;
            border-radius: 30px;
            color: #fff;
        }
    </style>
</head>
<body class="ui-page-login">
    <header class="mui-bar mui-bar-transparent">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    </header>
    <div class="login-content">
        <div class="login-logo"><img src="images/default.gif"/></div>
        <form id="login-form">
            <div class="ipttxt-row">
                <label><img src="images/accout.png"/></label>
                <input id="username" type="text" class="mui-input" placeholder="默认账号:root"/>
            </div>
            <div class="ipttxt-row">
                <label><img src="images/password.png"/></label>
                <input id="password" type="password" class="mui-input" placeholder="默认密码:root"/>
            </div>
            <!--<div class="link-area">
                <a href="forget_password.html">忘记密码?</a>
            </div>-->
        </form>
        <div style="margin-top: 10px">
            <button type="button" id="login" class="mui-btn mui-btn-block mui-btn-login" onclick="dologin()">登 录</button>
        </div>
    </div>
<script type="text/javascript">
        /* $(function(){
			//判断页面是否是在微信浏览器打开，对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
			var useragent = navigator.userAgent;

			if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {

				window.location.href = "wxError.html";//若不是微信浏览器，跳转到温馨error页面

			}

		 })*/

		 layui.use(['layer'],function(){
		     layer=layui.layer;
		     $=layui.jquery;
		 });

		// 登录
		function dologin(){
			var username = $.trim($('#username').val());
			var pwd = $.trim($('#password').val());
			
			if(username == ''){
				layer.alert('请输入用户名',{icon:2});
				return;
			}
			if(pwd == ''){
				layer.alert('请输入密码',{icon:2});
				return;
			}
			$.post("loginCheck.php",{'username':username,'pwd':pwd},function(res){
				if(res.code == 0){
					layer.alert(res.msg,{icon:2});
				}else{
					layer.msg(res.msg);
					setTimeout(function(){window.location.href ="firstPage.php"},1000);
				}
			},'json');
		}
</script>
</body>
</html>